<!--
 * @Author: DaHuaZhuXi
 * @Date: 2021-01-12 17:24:30
 * @LastEditTime: 2021-01-13 20:36:17
 * @LastEditors: DaHuaZhuXi
 * @Description: 地形
-->
<template>
  <ul class="peos elements">
    <li
      v-for="item in datas"
      :key="item.id"
      :id="item.id"
      :style="{
        width: unitSize + 'px',
        height: unitSize + 'px',
        left: unitSize * item.x + 'px',
        top: unitSize * item.y + 'px',
        fontSize: unitSize + 'px',
        lineHeight: unitSize + 'px',
      }"
    >
      <i :class="['iconfont', 'icon-' + item.icon]"></i>
      
      <Status :buffs="item.buffs"></Status>
      <span v-if="item.seat == 1" class="line hp"
        ><i :style="{ width: hpPerc(item) + '%' }"></i
      ></span>
      <span
        class="hit"
        v-if="item.seat == 1 && curPeo"
        v-show="
          curPeo &&
          common.indexOf2Array([item.x, item.y], curPeo._actionRange) != -1
        "
        >{{ curPeo.hit - item.eva + '%' }}</span
      >
      <span class="stateDes"></span>
    </li>
  </ul>
</template>

<script>
import Status from '@/components/Status.vue';
export default {
  components: { Status },
  props: ["datas", "unitSize", "curPeo"],
  computed: {
    hpPerc() {
      return function (item) {
        return Math.round(item.hp / item.hpMax * 100);
      }
    }
  },
}
</script>
<style lang="scss">
.battle {
  .elements {
    > li {
      position: absolute;

      > .iconfont {
        font-size: 1em;
        color: #444;
      }
    }

    .line {
      position: absolute;
      left: 2px;
      top: 2px;
      right: 2px;
      text-align: center;
      display: block;
      background: #545454;
      height: 2px;
      border-bottom: 1px solid #000;

      i {
        display: block;
        height: 100%;
        background: #07c160;
        transition: 1s;
      }
    }
    .hit {
      top: 0 !important;
    }

    .stateDes {
      font-size: 0.4em;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      text-align: center;
      opacity: 0;
      z-index: 99;
      text-shadow: 1px 1px 2px #000;
    }
  }
}
</style>
